<template>
  <div id="errorOrder">
    <div class="errTable">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="订单ID">
                <span>{{ props.row.oid }}</span>
              </el-form-item>
              <el-form-item label="异常原因">
                <span>{{ props.row.reason }}</span>
              </el-form-item>
              <el-form-item label="上报人">
                <span>{{ props.row.reviewer }}</span>
              </el-form-item>
              <el-form-item label="是否已经处理完成">
                <span v-if="props.row.status == 0">false</span>
                <span v-if="props.row.status == 1">true</span>
              </el-form-item>
              <el-form-item label="处理结果">
                <span>{{ props.row.result }}</span>
              </el-form-item>
              <el-form-item label="上报时间">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
              <el-form-item label="处理时间">
                <span>{{ props.row.endAt }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column width="300px" label="订单ID" prop="id">
        </el-table-column>
        <el-table-column width="100px" label="上报人" prop="reviewer">
        </el-table-column>
        <el-table-column label="异常处理状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1" class="tableStatusSuccess">
              <span>处理成功</span>
            </div>
            <div v-if="scope.row.status == 0" class="tableStatusWait">
              <span>等待处理</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleErrorBtn(scope.$index)"
              type="primary"
              plain
              >处理异常</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="handleErr">
      <el-dialog title="提示" :visible.sync="handleErrVisible" width="640px">
        <!-- 处理结果 -->
        <div class="handleResult">
          <span>处理结果</span>
          <el-input
            v-model="handleData.result"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <!-- 异常状态 -->
        <div class="handleStatus">
          <span>异常状态</span>
          <el-select v-model="handleStatus" placeholder="请选择">
            <el-option
              v-for="item in Status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleErrVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleErr()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getErrList, handleErrOrder } from "@/api/admin.js";
export default {
  name: "errorOrder",
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          oid: "好滋好味鸡蛋仔",
          reason: "江浙小吃、小吃零食",
          reviewer: "荷兰优质淡奶，奶香浓而不腻",
          status: "上海市普陀区真北路",
          result: "王小虎夫妻店",
          createTime: "10333",
          endAt: "111",
        },
      ],
      handleErrVisible: false,
      handleData: {
        id: "",
        oid: "",
        reason: "",
        reviewer: "",
        status: "",
        result: "",
        createTime: "",
        endAt: "",
      },
      Status: [
        {
          value: "处理完成",
          label: "处理完成",
        },
        {
          value: "还未处理",
          label: "还未处理",
        },
      ],
      handleStatus: "处理完成",
    };
  },
  methods: {
    // 获取异常订单列表
    getErrorList: function () {
      getErrList().then((res) => {
        this.tableData = res.data;
      });
    },
    // 点击处理异常按钮
    handleErrorBtn: function (index) {
      this.handleData = this.tableData[index];
      this.handleErrVisible = true;
    },
    // 处理异常订单
    handleErr: function () {
      if (this.handleStatus == "处理完成") {
        this.handleData.status = 1;
      } else {
        this.handleData.status = 0;
      }
      handleErrOrder(
        this.handleData.id,
        this.handleData.oid,
        this.handleData.reason,
        this.handleData.reviewer,
        this.handleData.status,
        this.handleData.result,
        this.handleData.createAt
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "处理成功",
            type: "success",
          });
          this.handleErrVisible = false;
        } else {
          this.$message({
            message: "处理失败",
            type: "error",
          });
        }
      });
    },
  },
  mounted() {
    this.getErrorList();
  },
};
</script>

<style lang="less" scoped>
#errorOrder {
  .errTable {
    margin: 20px 0 0 20px;
    .demo-table-expand {
      font-size: 0;
      display: flex;
      flex-direction: column;
      margin-left: 80px;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
    .tableStatusSuccess {
      width: 89px;
      height: 28px;
      background-color: rgba(231, 254, 180, 1);
      border: 1px rgba(138, 197, 6, 1) solid;
      border-radius: 5px;
      color: #8ac506;
      text-align: center;
      line-height: 28px;
    }
    .tableStatusWait {
      width: 89px;
      height: 28px;
      background-color: rgba(255, 215, 220, 1);
      border: 1px rgba(251, 95, 114, 1) solid;
      border-radius: 5px;
      color: #fb5f72;
      text-align: center;
      line-height: 28px;
    }
  }
  // 异常处理结果
  .handleErr {
    .handleResult {
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input {
        width: 496px;
        margin-left: 10px;
      }
    }
  }
  // 异常状态
  .handleStatus {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .el-select {
      margin-left: 10px;
    }
  }
}
</style>